<template>
  <div class="finpro_container">
    <div class="center_container">
      <div class="list_container">
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c1">
                {{ map[part_no1] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c1">
                {{ part_no1 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c1">
                <span>{{
                  location_name1 === "null_location" ? "暂无" : location_name1
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c2">
                {{ map[part_no2] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c2">
                {{ part_no2 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c2">
                <span>{{
                  location_name2 === "null_location" ? "暂无" : location_name2
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c3">
                {{ map[part_no3] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c3">
                {{ part_no3 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c3">
                <span>{{
                  location_name3 === "null_location" ? "暂无" : location_name3
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c4">
                {{ map[part_no4] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c4">
                {{ part_no4 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c4">
                <span>{{
                  location_name4 === "null_location" ? "暂无" : location_name4
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c5">
                {{ map[part_no5] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c5">
                {{ part_no5 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c5">
                <span>{{
                  location_name5 === "null_location" ? "暂无" : location_name5
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c6">
                {{ map[part_no6] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c6">
                {{ part_no6 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c6">
                <span>{{
                  location_name6 === "null_location" ? "暂无" : location_name6
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c7">
                {{ map[part_no7] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c7">
                {{ part_no7 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c7">
                <span>{{
                  location_name7 === "null_location" ? "暂无" : location_name7
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c8">
                {{ map[part_no8] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c8">
                {{ part_no8 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c8">
                <span>{{
                  location_name8 === "null_location" ? "暂无" : location_name8
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c9">
                {{ map[part_no9] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c9">
                {{ part_no9 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c9">
                <span>{{
                  location_name9 === "null_location" ? "暂无" : location_name9
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>

        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c10">
                {{ map[part_no10] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c10">
                {{ part_no10 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c10">
                <span>{{
                  location_name10 === "null_location" ? "暂无" : location_name10
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c11">
                {{ map[part_no11] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c11">
                {{ part_no11 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c11">
                <span>{{
                  location_name11 === "null_location" ? "暂无" : location_name11
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c12">
                {{ map[part_no12] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c12">
                {{ part_no12 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c12">
                <span>{{
                  location_name12 === "null_location" ? "暂无" : location_name12
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c13">
                {{ map[part_no13] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c13">
                {{ part_no13 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c13">
                <span>{{
                  location_name13 === "null_location" ? "暂无" : location_name13
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
        <div class="list">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="list_content c14">
                {{ map[part_no14] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="list_content c14">
                {{ part_no14 }}
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="content c14">
                <span>{{
                  location_name14 === "null_location" ? "暂无" : location_name14
                }}</span>
              </div></el-col
            >
          </el-row>
        </div>
      </div>
      <div class="pie_container">
        <fin-chart />
        <fin-chart-two />
      </div>
    </div>
  </div>
</template>
<script>
import { finishedData } from "@/api/midApi.js";
import FinChart from "./FinChart.vue";
import FinChartTwo from "./FinChartTwo.vue";
export default {
  name: "FinProOne",
  components: { FinChart, FinChartTwo },
  data() {
    return {
      map: {
        "55024315": "B41V/B30前玻璃",
        "55024326": "B41V/B30后玻璃",
        "55025295": "B26前玻璃",
        "55025298": "B26后玻璃",
        "55020315": "V254移动玻璃",
        "55021698": "A07前玻璃",
        "55026682A": "B02前玻璃",
        "55021708": "B02/A07后玻璃",
        "55021809": "NU2前玻璃",
        "55021819": "NU2后玻璃",
        "55021857": "C52X前玻璃",
        "55021860": "C52X后玻璃",
        "55026631": "L541前玻璃",
        "55026647": "L541后玻璃",
      },
      timer: null,
      part_no1: "55021698",
      part_no2: "55021708",
      part_no3: "55021809",
      part_no4: "55021819",
      part_no5: "55021857",
      part_no6: "55021860",
      part_no7: "55020315",
      part_no8: "55026631A",
      part_no9: "55026647A",
      part_no10: "55024315",
      part_no11: "55024326",
      part_no12: "55025295",
      part_no13: "55025298",
      part_no14: "55026682A",
      location_name1: "null_location",
      location_name2: "null_location",
      location_name3: "null_location",
      location_name4: "null_location",
      location_name5: "null_location",
      location_name6: "null_location",
      location_name7: "null_location",
      location_name8: "null_location",
      location_name9: "null_location",
      location_name10: "null_location",
      location_name11: "null_location",
      location_name12: "null_location",
      location_name13: "null_location",
      location_name14: "null_location",
      part_a: null,
      part_b: null,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      finishedData()
        .then((res) => {
          if (res.status == 200) {
            const result = res.data;
            // const result = {
            //   location_empty: 12,
            //   location_name1: "",
            //   location_name10: "null_location",
            //   location_name11: "IHE-FG-0617",
            //   location_name12: "IHE-FG-0125",
            //   location_name13: "IHE-FG-0402",
            //   location_name14: "IHE-FG-0403",
            //   location_name2: "IHE-FG-0305",
            //   location_name3: "null_location",
            //   location_name4: "null_location",
            //   location_name5: "IHE-FG-0211",
            //   location_name6: "null_location",
            //   location_name7: "IHE-FG-0604",
            //   location_name8: "IHE-FG-0422",
            //   location_name9: "IHE-FG-0118",
            //   location_total: 142,
            //   object_sum1: 2,
            //   object_sum10: 0,
            //   object_sum11: 4,
            //   object_sum12: 4,
            //   object_sum13: 22,
            //   object_sum14: 18,
            //   object_sum2: 5,
            //   object_sum3: 0,
            //   object_sum4: 0,
            //   object_sum5: 9,
            //   object_sum6: 0,
            //   object_sum7: 3,
            //   object_sum8: 3,
            //   object_sum9: 3,
            //   part_A: 35,
            //   part_A1: 4,
            //   part_B: 18,
            //   part_no1: "55024315",
            //   part_no10: "55021819",
            //   part_no11: "55021857",
            //   part_no12: "55021860",
            //   part_no13: "55026631",
            //   part_no14: "55026647",
            //   part_no2: "55024326",
            //   part_no3: "55025295",
            //   part_no4: "55025298",
            //   part_no5: "55020315",
            //   part_no6: "55021698",
            //   part_no7: "55026682A",
            //   part_no8: "55021708",
            //   part_no9: "55021809",
            // };

            console.log('result',result);
            this.part_a = result.part_A;
            this.part_b = result.part_B;
            this.part_no1 = result.part_no1;
            this.part_no2 = result.part_no2;
            this.part_no3 = result.part_no3;
            this.part_no4 = result.part_no4;
            this.part_no5 = result.part_no5;
            this.part_no6 = result.part_no6;
            this.part_no7 = result.part_no7;
            this.part_no8 = result.part_no8;
            this.part_no9 = result.part_no9;
            this.part_no10 = result.part_no10;
            this.part_no11 = result.part_no11;
            this.part_no12 = result.part_no12;
            this.part_no13 = result.part_no13;
            this.part_no14 = result.part_no14;

            this.location_name1 = result.location_name1;
            this.location_name2 = result.location_name2;
            this.location_name3 = result.location_name3;
            this.location_name4 = result.location_name4;
            this.location_name5 = result.location_name5;
            this.location_name6 = result.location_name6;
            this.location_name7 = result.location_name7;
            this.location_name8 = result.location_name8;
            this.location_name9 = result.location_name9;
            this.location_name10 = result.location_name10;
            this.location_name11 = result.location_name11;
            this.location_name12 = result.location_name12;
            this.location_name13 = result.location_name13;
            this.location_name14 = result.location_name14;
          }
          this.timer = setTimeout(this.getData, 5000);
        })
        .catch((error) => {
          throw error;
        });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
};
</script>
<style lang="scss" scoped>
.finpro_container {
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 10px;
  .center_container {
    width: 100%;
    height: 100%;
    // border: 1px solid green;
    display: flex;
    flex-wrap: nowrap;
    .list_container {
      width: 59%;
      height: 99%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .list {
        width: 98%;
        font-size: 28px;
        .el-col {
          height: 5.5vh !important;
          line-height: 5.5vh;
          .list_content {
            border-radius: 5px;
          }
        }
      }
    }
    .pie_container {
      width: 40%;
      height: 99%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      > div {
        width: 100%;
        height: 49%;
      }
    }
  }
  .c1 {
    background: rgba(106, 90, 205, 0.6);
    box-shadow: 0 10px 15px#6a5acd;
  }
  .c2 {
    background: rgba(132, 112, 255, 0.6);
    box-shadow: 0 10px 15px#8470ff;
  }
  .c3 {
    background: rgba(132, 112, 255, 0.6);
    box-shadow: 0 10px 15px#8470ff;
  }
  // .c2 {
  //   background: rgba(229, 228, 236, 0.6);
  //   box-shadow: 0 10px 15px#d5d4d6;
  // }
  // .c6 {
  //   background: rgba(65, 105, 255, 0.6);
  //   box-shadow: 0 10px 15px#4169E1;
  // }
  .c4 {
    background: rgba(30, 144, 255, 0.6);
    box-shadow: 0 10px 15px#1e90ff;
  }
  .c5 {
    background: rgba(81, 163, 245, 0.6);
    box-shadow: 0 10px 15px#97c0e9;
  }
  .c6 {
    background: rgba(81, 163, 245, 0.6);
    box-shadow: 0 10px 15px#97c0e9;
  }
  .c7 {
    background: rgba(135, 206, 250, 0.6);
    box-shadow: 0 10px 15px#87cefa;
  }
  .c8 {
    background: rgba(135, 206, 250, 0.6);
    box-shadow: 0 10px 15px#87cefa;
  }
  .c9 {
    background: rgba(135, 206, 250, 0.6);
    box-shadow: 0 10px 15px#87cefa;
  }
  .c10 {
    background: rgba(0, 134, 139, 0.6);
    box-shadow: 0 10px 15px#00868b;
  }
  .c11 {
    // background: rgba(0, 134, 139, 0.6);
    background: #0a858a99;
    box-shadow: 0 10px 15px#00868b;
  }
  .c12 {
    background: #115e6199;
    // background: rgba(0, 134, 139, 0.6);
    box-shadow: 0 10px 15px#00868b;
  }
  .c13 {
    background: #3b8ba3;
    box-shadow: 0 10px 15px#3c7e92;
  }
  .c14 {
    background: #387385;
    box-shadow: 0 10px 15px#5898ac;
  }
}
</style>
